<style>
    .ly-button-group-popper-class{
        padding: 16px 0;
    }
    .ly-button-group-popper-class button{
        display: block;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        border-radius: 0;
        background: #fff;
        border: 0;
        color: #464646;
        padding: 10px 0;
    }
    .ly-button-group-popper-class .el-button+.el-button{
        margin-left: 0;
    }
</style>
<template>
    <ly-page>
        <ly-navi title="按钮组"></ly-navi>
        <ly-page-content>
            <ly-tip type="success" border>按钮组正常用于表格的操作栏目</ly-tip>
            <el-radio-group v-model="size">
                <el-radio :label="2">每行2个</el-radio>
                <el-radio :label="3">每行3个</el-radio>
                <el-radio :label="4">每行4个</el-radio>
            </el-radio-group>
            <div style="margin-top: 20px;">
                按钮数量: <el-input-number size="mini" v-model="count"  :min="1" :max="12" label="按钮数量"></el-input-number>
            </div>
            <div style="width:400px;margin-top: 20px;border: 1px solid #efefef;padding: 10px;">
                <ly-button-group :size="size">
                    <el-button v-for="i in count" type="primary" size="mini">按钮{{i}}</el-button>
                </ly-button-group>
            </div>

            <ly-code-view>
                <pre v-pre>
<ly-button-group :size="size">
    <el-button v-for="i in count" type="primary" size="mini">按钮{{i}}</el-button>
</ly-button-group>
                </pre>

            </ly-code-view>

            <ly-markdown>
            <pre v-pre>
## `ly-button-group`

#### Attributes

| 属性名  |说明   | 类型|可选值|默认值|
| ------------ | ------------ |------------ |------------ |------------ |
|  size | 每行显示数量	  |int |—	|2|

            </pre>
            </ly-markdown>

        </ly-page-content>

    </ly-page>
</template>
<script>
    Rap.define("", [], function () {
        return {
            data: function () {
                return {
                    size: 2,
                    count:8
                }
            },
            mounted: function () {
//
            },
            methods: {
                a:function () {
                    alert(1);
                },b:function () {
                    alert(2);
                }
            }
        }
    })
</script>